import React, { useContext } from 'react';
import classes from './Counter.module.css';
import CartContext from '@/store/cartContext';

// 计数器的组件
const Counter = (props) => {
  const cart = useContext(CartContext)
  // console.log('cart',cart)
  const onAdd = () =>{
    // console.log('add props.meal',props.meal)
    cart.addMeals(props.meal)
  }
  const onSub =() => {
    // console.log('sub props.meal',props.meal)
    cart.subMeals(props.meal)
  }
    return (
      <div className={classes.Counter}>
        {
          (props.meal.amount && props.meal.amount !== 0) ? (
            <>
              <button onClick={onSub} className={classes.Sub}><span>-</span></button>
              <span className={classes.count}>{props.meal.amount}</span>
            </>
          ) : null
        }
        <button className={classes.Add} onClick={onAdd}>
            <span>+</span>
        </button>
      </div>
    );
};

export default Counter;
